<script setup>
import LayoutNav from '../Layout/components/LayoutNav.vue';
import LayoutFooter from '../Layout/components/LayoutFooter.vue';
import { ref, computed, watch, onMounted } from 'vue';
import { useOrderStore } from '@/store/order';
import { useRouter,useRoute } from 'vue-router' // 确保引入useRouter
import { getProjectInfoAPi } from '@/api/crowdFunding'
import { getSkuListAPI } from '@/api/good'
import { getUserInfoApi } from '@/api/user'

const router = useRouter() // 获取router实例
const route = useRoute()


// const projectInfo = ref({
//   project_id:1,
//   pictures: [
//     "https://img.diytrade.com/smimg/122287/49109630-11319999-0/%E8%A1%AC%E8%A1%AB/2977.png",
//     "https://img.diytrade.com/smimg/122287/49109632-11320001-0/%E8%A1%AC%E8%A1%AB/284c.png",
//     "https://img.diytrade.com/smimg/122287/49109633-11320002-0/%E8%A1%AC%E8%A1%AB/ea04.png"
//   ],
//   name: "清爽舒适，青年格子衬衫",
//   description: '这款格子衬衫采用优质面料，保暖又舒适，独特的花纹设计。',
//   price: 150,
//   initiator: '张三',
//   startTime: '2023-07-01',
//   endTime: '2024-12-01',
//   currentQuantity: 4500,
//   targetQuantity: 10000,
//   skuData: {
//     colors: [
//       { name: '蓝白格', image: 'https://img.diytrade.com/smimg/122287/49109630-11319999-0/%E8%A1%AC%E8%A1%AB/2977.png'},
//       { name: '红白格', image: 'https://img.diytrade.com/smimg/122287/49109632-11320001-0/%E8%A1%AC%E8%A1%AB/284c.png'},
//       { name: '灰白格', image: 'https://img.diytrade.com/smimg/122287/49109633-11320002-0/%E8%A1%AC%E8%A1%AB/ea04.png'}
//     ],
//     sizes: ['S', 'M', 'L', 'XL', 'XXL'],
//     // SKU 库存数据
//     skuList: [
//       { color: '蓝白格', size: 'S', quantity: 100 },
//       { color: '蓝白格', size: 'M', quantity: 200 },
//       { color: '蓝白格', size: 'L', quantity: 300 },
//       { color: '蓝白格', size: 'XL', quantity: 200 },
//       { color: '蓝白格', size: 'XXL', quantity: 100 },
//       { color: '红白格', size: 'S', quantity: 100 },
//       { color: '红白格', size: 'M', quantity: 200 },
//       { color: '红白格', size: 'L', quantity: 300 },
//       { color: '红白格', size: 'XL', quantity: 200 },
//       { color: '红白格', size: 'XXL', quantity: 100 },
//       { color: '灰白格', size: 'S', quantity: 100 },
//       { color: '灰白格', size: 'M', quantity: 200 },
//       { color: '灰白格', size: 'L', quantity: 300 },
//       { color: '灰白格', size: 'XL', quantity: 200 },
//       { color: '灰白格', size: 'XXL', quantity: 100 }
//     ]
//   }
// })

const projectInfo = ref({})
const getProjectInfo = async () => {
  //console.log(route.params.projectid)
  const res = await getProjectInfoAPi(route.params.projectid)
  projectInfo.value = res.data
  getSkuList(projectInfo.value.goodId)
  //获取发起人信息
  const res2 = await getUserInfoApi(projectInfo.value.initiatorId)
  projectInfo.value.initiator = res2.data[0].username;
  // 在数据加载完成后初始化 checkInfo
  checkInfo.value = {
    projectId: projectInfo.value.projectId,
    name: projectInfo.value.name,
    price: projectInfo.value.price,
    quantity: 1,
    totalPrice: 0,
    selectedSku: {
      color: '',
      size: '',
      image: ''
    }
  };
}

const quantity = ref(1)

// 计算众筹进度
const fundingProgress = computed(() => {
  return Math.floor((projectInfo.value.currentQuantity / projectInfo.value.targetQuantity) * 100)
})

// 计算剩余天数
const remainDays = computed(() => {
  const end = new Date(projectInfo.value.endTime)
  const now = new Date()
  const diff = end - now
  return Math.max(0, Math.floor(diff / (1000 * 60 * 60 * 24)))
})

// 判断进度状态
const progressStatus = computed(() => {
  if (fundingProgress.value >= 100) return 'success'
  if (remainDays.value <= 0) return 'exception'
  return ''
})

const skuData = ref({
  colors: [],
  sizes: [],
  skuList: []
})
//获取商品规格
const getSkuList = async (goodId) => {
  const res = await getSkuListAPI(goodId)
  skuData.value = transformSkuData(res.data)
  console.log(skuData.value)
}

const transformSkuData = (originalData) => {
  // 创建新对象而不是直接修改 skuData.value
  const result = {
    colors: [],
    sizes: [],
    skuList: []
  }

  // 提取唯一的颜色和尺码
  const uniqueColors = new Set()
  const uniqueSizes = new Set()

  originalData.forEach(item => {
    uniqueColors.add(item.color)
    uniqueSizes.add(item.size)
  })

  // 处理颜色数据
  result.colors = Array.from(uniqueColors).map(color => {
    const imageItem = originalData.find(item => item.color === color)
    return {
      name: color,
      image: imageItem?.image || ''
    }
  })

  // 处理尺码数据
  result.sizes = Array.from(uniqueSizes)

  // 处理SKU列表
  result.skuList = originalData.map(item => ({
    color: item.color,
    size: item.size,
    quantity: item.quantity
  }))

  return result  // 返回转换后的数据
}

const checkInfo = ref({})

// 修改参与按钮逻辑
const canJoin = computed(() => {
  return remainDays.value > 0 && 
        fundingProgress.value < 100 && 
        checkInfo.value.selectedSku.color && 
        checkInfo.value.selectedSku.size &&
        quantity.value > 0
})

// 监听数量和价格变化，自动计算总价
watch(
  [
    () => checkInfo.value.quantity,
    () => checkInfo.value.price
  ],
  () => {
    checkInfo.value.totalPrice = checkInfo.value.price * checkInfo.value.quantity
  },
  { immediate: true } // 立即执行一次
)

const orderStore = useOrderStore();

// 修改参与众筹方法
const handleJoin = () => {
  if (!checkInfo.value.selectedSku.color || !checkInfo.value.selectedSku.size) {
    ElMessage.warning('请选择商品规格')
    return
  }
  
  if (!canJoin.value) {
    ElMessage.warning('众筹已结束')
    return
  }
  console.log(checkInfo.value)
  //清空已有的订单信息
  orderStore.clearCheckInfo(checkInfo.value);
  orderStore.setCheckInfo(checkInfo.value);
  router.push('/order')
  // router.push({
  //   path: '/payment',
  //   query: {
  //     id: projectInfo.value.id,
  //     color: selectedSku.value.color,
  //     size: selectedSku.value.size,
  //     quantity: quantity.value,
  //     amount: quantity.value * projectInfo.value.price
  //   }
  // })
}

//众筹详情标签
const activeName = ref('first')

onMounted(() => {
  getProjectInfo()
})

</script>

<template>
    <LayoutNav/>
    <div class="container">
      <div class="header-box">
      <div class="logo">
      <RouterLink to="/">桃禧</RouterLink>
      </div>
      <p>众筹浏览</p>
    </div>
    </div>
    <div class="container">
      <div class="projectInfo-page">
      <!-- 众筹信息 -->
      <div class="info-container">
        <div>
          <div class="projectInfo-info">
            <div class="media">
              <!-- 图片预览区 -->
              <img class="goods-img" :src="projectInfo.image" alt="" />
            </div>
            <div class="spec">
              <div class="product-info">
              <h1 class="title">{{ projectInfo.projectName }}</h1>
              <p class="desc">{{ projectInfo.description }}</p>
            
              <!-- 众筹进度 -->
              <div class="funding-progress">
                <div class="current-amount">
                  <span class="number">{{ projectInfo.currentQuantity }}</span>
                  <span class="label">当前数量</span>
                </div>
                <div class="target-amount">
                  <span class="number">{{ projectInfo.targetQuantity }}</span>
                  <span class="label">目标数量</span>
                </div>
                <div class="remain-time">
                  <span class="number">{{ remainDays }}</span>
                  <span class="label">剩余天数</span>
                </div>
                <el-progress 
                  :percentage="fundingProgress" 
                  :status="progressStatus"
                />
              </div>

              <!-- 发起人信息 -->
              <div class="initiator">
                <span class="label">发起人：</span>
                <span>{{ projectInfo.initiator }}</span>
              </div>

              <!-- 众筹时间 -->
              <div class="funding-time">
                <span class="label">众筹时间：</span>
                <span>{{ projectInfo.startTime }} - {{ projectInfo.endTime }}</span>
              </div>
              <!-- sku选择器 -->
              <el-empty v-if="!skuData.colors.length" description="暂无规格信息" />
                <template v-else>
                  <CrowdFundingSku
                  :sku-data="skuData"
                  v-model:sku="checkInfo.selectedSku"
                  v-model:quantity="checkInfo.quantity"
                />
                </template>
              <!-- 参与按钮 -->
              <div class="actions">
                <el-button 
                  type="primary" 
                  size="large" 
                  :disabled="!canJoin"
                  @click="handleJoin"
                >
                  立即参与
                </el-button>
              </div>
            </div>
            </div>
          </div>
          <div class="projectInfo-footer">
              <!-- 商品详情 -->
              <div class="projectInfo-tabs">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" tab-position="left">
                  <el-tab-pane label="详细描述" name="first">
                  <div class="projectInfo-detail">
                      <p class="title">项目介绍</p>
                      <p class="desc">
                        欢迎来到我们的环保T恤系列！我们使用100%有机棉和回收材料，致力于创造舒适、时尚且对环境友好的服装。我们的设计灵感来自自然，希望让每个人在时尚与可持续之间找到完美平衡。
                      </p>
                      <p class="title">
                        视觉元素
                      </p>
                      <p class="desc">
                        主图：展示T恤的高质量图片，模特穿着展示不同颜色和尺码。<br>
                        副图：包含设计师讲解、制作过程的花絮，强调环保理念以及对比传统服装的环保优势。
                      </p>
                      <p class="title">
                        团队介绍
                      </p>
                      <p class="desc">
                        创始人：张三<br>
                        设计师，拥有10年时尚设计经验，曾为多个品牌工作，热衷于推动可持续发展。<br>
                        团队成员：包括环保专家、市场推广专员和客户服务团队。
                      </p>
                      <p class="title">厂家介绍</p>
                      <p class="desc">
                        我们的T恤由位于深圳的“绿色服装工厂”生产。该工厂专注于可持续时尚，采用环保材料和低能耗生产工艺，确保每一件产品在减少碳足迹的同时，保持高质量标准。工厂拥有先进的设备和专业的团队，确保每个订单都能精准完成，并遵循公平劳动的原则。我们与工厂保持密切合作，定期检查生产过程，以确保符合我们的环保承诺。
                      </p>
                    <img v-for="img in skuData.colors" :src="img.image" :key="img" alt="">
                  </div>
                  </el-tab-pane>
                  <el-tab-pane label="众筹方式" name="second">
                  <div class="projectInfo-detail">
                    <p class="title">筹款目标</p>
                    <p class="desc">
                      目标金额：$10,000<br>
                      资金用途：材料采购、生产费用和市场推广。
                    </p>
                    <p class="title">项目时间线</p>
                    <p class="desc">
                      筹款期：2024年9月1日 - 2024年10月1日<br>
                      生产开始：2024年10月15日<br>
                      发货时间：预计2024年12月15日</p>
                    <p class="title">众筹要求</p>
                    <p class="desc">我们需要至少100件订单才能开始生产这款环保T恤。每位支持者可以选择不同的颜色和印花设计。</p>
                  </div>
                  </el-tab-pane>
                  <el-tab-pane label="常见问题" name="third">
                    <div class="questions">
                      <h3>常见问题</h3>
                      <ul>
                        <li>
                          <strong>众筹的最低起订量是多少？</strong>
                          <p>我们的最低起订量为100件，达到这个数量后将开始生产。</p>
                        </li>
                        <li>
                          <strong>如果众筹未成功，我的资金会怎样？</strong>
                          <p>如果众筹未达到目标，您的资金将全额退款。</p>
                        </li>
                        <li>
                          <strong>可以更改我的定制选项吗？</strong>
                          <p>在众筹结束前，您可以随时修改您的选择。</p>
                        </li>
                        <li>
                          <strong>预计的发货时间是多久？</strong>
                          <p>一旦众筹成功，预计在生产完成后约6-8周内发货。</p>
                        </li>
                        <li>
                          <strong>如何确保我的订单隐私？</strong>
                          <p>我们承诺保护您的个人信息，不会将其分享给第三方。</p>
                        </li>
                      </ul>

                      <h3>风险提示</h3>
                      <ol>
                        <li>
                          点击“参与众筹”，即表明您已阅读并同意《支持者协议》及《隐私政策》，并自愿承担众筹相应风险。
                        </li>
                        <li>
                          您参与众筹是支持将创意变为现实的过程，而不是直接的商品交易，因此存在一定风险。请您根据自己的判断选择、支持众筹项目。众筹存在于发起人与支持者之间，众筹网作为第三方平台，只提供网络空间、技术支持等服务。众筹的回报产品和承诺由发起人提供和作出，发起者和支持者应依法承担使用众筹网产品产生的法律后果。
                        </li>
                        <li>
                          众筹项目的回报发放及其他后续服务事项均由发起人负责。如果发生发起人无法发放回报、延迟发放回报、不提供回报后续服务等情形，您需要直接和发起人协商解决。
                        </li>
                        <li>
                          由于发起人能力和经验不足、市场风险、法律风险等各种因素，众筹可能失败。对于在众筹期限届满前失败的项目，您支持项目的款项会全部原路退还给您；对于众筹成功的项目，支持者不能通过众筹网平台申请退款，若此时支持者因任何原因希望退款，需直接与发起者协商，若发起者同意退款，需直接向支持者退回款项，众筹网不会从可结算款项中扣除该部分退款金额。您对项目发起人的无偿支持以及额外打赏，一旦众筹成功将不予退款，但众筹失败的情况除外。
                        </li>
                      </ol>
                    </div>
                  </el-tab-pane>
                </el-tabs>
            </div>
          </div>
      </div>
    </div>
  </div>

    </div>
<LayoutFooter/>
</template>
<style lang="scss" scoped>
.header-box {
  background: #fff;
  position: relative;
  height: 120px;
  display: flex;

  p {
    font-size: 24px;
    margin-left: 20px;
    margin-top: 50px;
  }

  .logo {
    width: 80px;
    a {
      display: block;
      height: 100px;
      width: 100%;
      text-indent: -9999px;
      background: url('@/assets/images/logo.png') no-repeat center 18px / contain;
    }
  }

  .search-box {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 50%;
    right: 20px;

    .el-input {
      margin-left: 20px;
    }
    .el-button {
      margin-left: 20px;
    }
  }
}

.projectInfo-page {
  margin-top: 20px;

  .projectInfo-info {
    min-height: 500px;
    background: #fff;
    display: flex;

    .media {
      width: 580px;
      height: 500px;
      padding: 30px 50px;
    }

    .spec {
      flex: 1;
      padding: 30px 30px 30px 0;
    }

        .title {
      font-size: 24px;
      margin: 0 0 15px;
    }
    
    .desc {
      color: #666;
      margin-bottom: 20px;
    }
    
    .funding-progress {
      background: #f8f8f8;
      padding: 10px;
      border-radius: 8px;
      margin-bottom: 20px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 15px;
      
      .number {
        display: block;
        font-size: 24px;
        font-weight: bold;
        color: #ff6b6b;
      }
      
      .label {
        font-size: 14px;
        color: #666;
      }
    }
    
    .initiator,
    .funding-time {
      margin-bottom: 15px;
      color: #666;
      
      .label {
        color: #333;
      }
    }
    
    .price-section {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20px 0;
      
      .price {
        .symbol {
          font-size: 16px;
          color: #ff6b6b;
        }
        
        .number {
          font-size: 28px;
          font-weight: bold;
          color: #ff6b6b;
        }
      }
    }
    
    .actions {
      text-align: center;
    }
  }

  .projectInfo-footer {
    display: flex;
    margin-top: 20px;
    width: 100%;
  }

  .projectInfo-tabs {
    min-height: 600px;
    background: #fff;
    width: 100%;

    img {
      width: 800px;
      height: 800px;
    }

    .title {
      font-size: 24px;
      padding: 20px;
    }

    .desc {
      line-height: 1.8;
      font-size: 18px;
      color: #666;
      padding: 10px;
      margin-left: 10px;
    }
  }
}

.questions {
  line-height: 1.6;
  margin: 20px 0 0 20px;

  h3 {
    font-size: 24px;
    margin-bottom: 20px;
  }

  ul, ol {
    list-style-type: none;
    padding: 0;
  }

  li {
    margin-bottom: 15px;
  }

  strong {
    display: block;
    font-size: 18px;
    margin-bottom: 5px;
  }

  p {
    margin: 0;
    font-size: 18px;
    padding: 10px;
    color: #666;
  }

  ol li {
    margin-bottom: 20px;
    font-size: 18px;
    padding-right: 20px;
  }
}

// element-plus tabs样式覆盖
:deep(.el-tabs__nav) {
  width: 150px;
}

:deep(.el-tabs__item) {
  padding: 20px !important;
  margin-right: 20px;
  height: 50px;
  font-size: 20px !important;
}
</style>
